<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我的购物车-品优购</title>
    <meta
      name="description"
      content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"
    />
    <meta
      name="Keywords"
      content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"
    />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css" />
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css" />
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css" />
    <script src="./js/jquery.min.js"></script>
    <script>
      // 做的全选&单选逻辑
      $(function () {
        // 所有的全选按钮
        const $dgg = $('.checkall')
        // 所有的复选框
        const $allCheckBox = $('.j-checkbox, .checkall')

        // 全选
        $dgg.on('change', function () {
          // this // 是谁触发的就是谁
          const checked = $(this).prop('checked')
          // console.log(checked)
          // $('.j-checkbox, .checkall').prop('checked', checked)
          $allCheckBox.prop('checked', checked)
          // 先获取到所有的小勾勾，在去找所有的 div，再设 class，（有BUG：如果事先已经勾上了某个小勾勾，就会出现）
          //   $('.j-checkbox').parents('.cart-item').toggleClass('check-cart-item')
          //   if (checked) {
          //     $('.j-checkbox').parents('.cart-item').addClass('check-cart-item')
          //   } else {
          //     $('.j-checkbox').parents('.cart-item').removeClass('check-cart-item')
          //   }
          //   const $allDiv = $('.j-checkbox').parents('.cart-item')
          //   if (checked) {
          //     $allDiv.addClass('check-cart-item')
          //   } else {
          //     $allDiv.removeClass('check-cart-item')
          //   }
          $('.j-checkbox')
            .parents('.cart-item')
            [checked ? 'addClass' : 'removeClass']('check-cart-item')

          setFloatbarRight()
        })

        // 单选
        $('.j-checkbox').on('change', function () {
          // 这个事件回调函数处理的时机是状态改变时（有可能勾上，有可能是取消勾上）
          $(this).parents('.cart-item').toggleClass('check-cart-item')

          // 判断是否所有的小勾勾都勾上了，若是，则将全选勾勾勾上，反之，将全选勾勾不勾上
          // $('.j-checkbox').length // 所有小勾勾的数量
          // $('.j-checkbox:checked').length // 选中的小勾勾的数量
          // if ($('.j-checkbox').length === $('.j-checkbox:checked').length) {
          //     // 全都勾上了，要将全选勾上
          //     $('.checkall').prop('checked', true)
          // } else {
          //     // 不是全都勾上了，要将全选取消勾选
          //     $('.checkall').prop('checked', false)
          // }
          // $('.checkall').prop('checked', $('.j-checkbox').length === $('.j-checkbox:checked').length ? true : false)
          $dgg.prop('checked', $('.j-checkbox').length === $('.j-checkbox:checked').length)

          setFloatbarRight()
        })
      })

      // 做删除
      $(function () {
        $('.p-action > a').on('click', function () {
          $(this).closest('.cart-item').remove()

          setFloatbarRight()
        })
      })

      // 做加减
      $(function () {
        // 加
        $('.p-num .increment, .p-num .decrement').on('click', function () {
          // 拿现有的值，在此基础上 +1
          const $input = $(this).siblings('.itxt')
          let value = $input.val()

          // 如何判断当前点击的是 + 按钮 还是 - 按钮？
          if ($(this).hasClass('increment')) {
            value++
          } else {
            // 如果不大于1，那么不用干啥了
            if (value <= 1) return
            value--
          }

          $input.val(value)

          // const price = Number($(this).closest('.p-num').siblings('.p-price').text().slice(1))
          // const sum = price * value
          // $(this)
          //   .closest('.p-num')
          //   .siblings('.p-sum')
          //   .text(`￥${sum.toFixed(2)}`)
          setXiaoJi($input)

          setFloatbarRight()
        })

        // // 加
        // $('.p-num .increment').on('click', function () {
        //   // 拿现有的值，在此基础上 +1
        //   const $input = $(this).siblings('.itxt')
        //   let value = $input.val()
        //   $input.val(++value)

        //   const price = Number($(this).closest('.p-num').siblings('.p-price').text().slice(1))
        //   const sum = price * value
        //   $(this)
        //     .closest('.p-num')
        //     .siblings('.p-sum')
        //     .text(`￥${sum.toFixed(2)}`)
        // })

        // // 减
        // $('.p-num .decrement').on('click', function () {
        //   // 拿现有的值，在此基础上 -1
        //   const $input = $(this).siblings('.itxt')
        //   let value = $input.val()
        //   if (value > 1) {
        //     $input.val(--value)

        //     const price = Number($(this).closest('.p-num').siblings('.p-price').text().slice(1))
        //     const sum = price * value
        //     $(this)
        //       .closest('.p-num')
        //       .siblings('.p-sum')
        //       .text(`￥${sum.toFixed(2)}`)
        //   }
        // })
      })

      // 删除选中的和清空购物车
      $(function () {
        $('.cart-floatbar .remove-batch').on('click', function () {
          $('.j-checkbox:checked').closest('.cart-item').remove()
          $('.checkall').prop('checked', false)

          setFloatbarRight()
        })

        $('.cart-floatbar .clear-all').on('click', function () {
          $('.cart-item-list').html('')
          $('.checkall').prop('checked', false)

          setFloatbarRight()
        })
      })

      // 数量
      $(function () {
        function setFloatbarRight() {
          // 总数量
          const inputs = Array.from($('.j-checkbox:checked').closest('.cart-item').find('.itxt'))
          let sum = 0
          for (const input of inputs) {
            sum += Number($(input).val())
          }
          $('.amount-sum em').text(sum)

          // 总价
          let total = 0
          for (const div of Array.from(
            $('.j-checkbox:checked').closest('.cart-item').children('.p-sum')
          )) {
            total += Number($(div).text().slice(1))
          }
          $('.cart-floatbar .price-sum > em').text(`￥${total.toFixed(2)}`)
        }

        window.setFloatbarRight = setFloatbarRight
      })

      // 处理输入框只能输正整数逻辑
      $(function () {
        // function setAllXiaoJi() {
        //   for (const v of Array.from($('.cart-item .p-price'))) {
        //     const price = v.innerText.slice(1)
        //     const num = $(v).siblings('.p-num').find('.itxt').val()
        //     $(v)
        //       .siblings('.p-sum')
        //       .text(`￥${(price * num).toFixed(2)}`)
        //   }
        // }

        window.setXiaoJi = function ($input) {
          const price = $input.closest('.cart-item').children('.p-price').text().slice(1)
          const subtotal = price * $input.val()
          $input
            .closest('.cart-item')
            .children('.p-sum')
            .text(`￥${subtotal.toFixed(2)}`)
        }

        $('.cart-item > .p-num .itxt').on('input', function (e) {
          const v = $(this).val()
          // 如果是空的，就不用处理了
          if (v === '') return
          // 将非数字字符替换成空
          let newValue = parseInt(v.replace(/[^\d]/g, ''))
          newValue = isNaN(newValue) || newValue < 1 ? 1 : newValue
          $(this).val(newValue)

          // setAllXiaoJi()

          // const price = $(this).closest('.cart-item').children('.p-price').text().slice(1)
          // const subtotal = price * newValue
          // $(this)
          //   .closest('.cart-item')
          //   .children('.p-sum')
          //   .text(`￥${subtotal.toFixed(2)}`)

          setXiaoJi($(this))

          setFloatbarRight()
        })

        $('.cart-item > .p-num .itxt').on('blur', function () {
          if ($(this).val() === '') $(this).val(1)

          // const price = $(this).closest('.cart-item').children('.p-price').text().slice(1)
          // const subtotal = price * newValue
          // $(this)
          //   .closest('.cart-item')
          //   .children('.p-sum')
          //   .text(`￥${subtotal.toFixed(2)}`)

          setXiaoJi($(this))
        })
      })
    </script>
  </head>

  <body>
    <!-- 顶部快捷导航start -->
    <div class="shortcut">
      <div class="w">
        <div class="fl">
          <ul>
            <li>品优购欢迎您！</li>
            <li>
              <a href="#">请登录</a>
              <a href="#" class="style-red">免费注册</a>
            </li>
          </ul>
        </div>
        <div class="fr">
          <ul>
            <li><a href="#">我的订单</a></li>
            <li class="spacer"></li>
            <li>
              <a href="#">我的品优购</a>
              <i class="icomoon"></i>
            </li>
            <li class="spacer"></li>
            <li><a href="#">品优购会员</a></li>
            <li class="spacer"></li>
            <li><a href="#">企业采购</a></li>
            <li class="spacer"></li>
            <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
            <li class="spacer"></li>
            <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
            <li class="spacer"></li>
            <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 顶部快捷导航end  -->

    <div class="car-header">
      <div class="w">
        <div class="car-logo"><img src="img/logo.png" alt="" /> <b>购物车</b></div>
      </div>
    </div>

    <div class="c-container">
      <div class="w">
        <div class="cart-filter-bar">
          <em>全部商品</em>
        </div>
        <!-- 购物车主要核心区域 -->
        <div class="cart-warp">
          <!-- 头部全选模块 -->
          <div class="cart-thead">
            <div class="t-checkbox">
              <input type="checkbox" name="" id="" class="checkall" /> 全选
            </div>
            <div class="t-goods">商品</div>
            <div class="t-price">单价</div>
            <div class="t-num">数量</div>
            <div class="t-sum">小计</div>
            <div class="t-action">操作</div>
          </div>
          <!-- 商品详细模块 -->
          <div class="cart-item-list">
            <!-- check-cart-item 这个类名表示加黄色的背景 -->
            <div class="cart-item">
              <div class="p-checkbox">
                <input type="checkbox" name="" id="" class="j-checkbox" />
              </div>
              <div class="p-goods">
                <div class="p-img">
                  <img src="upload/p1.jpg" alt="" />
                </div>
                <div class="p-msg">
                  【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲
                </div>
              </div>
              <div class="p-price">￥12.60</div>
              <div class="p-num">
                <div class="quantity-form">
                  <a href="javascript:;" class="decrement">-</a>
                  <input type="text" class="itxt" value="1" maxlength="4" />
                  <a href="javascript:;" class="increment">+</a>
                </div>
              </div>
              <div class="p-sum">￥12.60</div>
              <div class="p-action"><a href="javascript:;">删除</a></div>
            </div>
            <div class="cart-item">
              <div class="p-checkbox">
                <input type="checkbox" name="" id="" class="j-checkbox" />
              </div>
              <div class="p-goods">
                <div class="p-img">
                  <img src="upload/p2.jpg" alt="" />
                </div>
                <div class="p-msg">
                  【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽
                </div>
              </div>
              <div class="p-price">￥24.80</div>
              <div class="p-num">
                <div class="quantity-form">
                  <a href="javascript:;" class="decrement">-</a>
                  <input type="text" class="itxt" value="1" />
                  <a href="javascript:;" class="increment">+</a>
                </div>
              </div>
              <div class="p-sum">￥24.80</div>
              <div class="p-action"><a href="javascript:;">删除</a></div>
            </div>
            <div class="cart-item">
              <div class="p-checkbox">
                <input type="checkbox" name="" id="" class="j-checkbox" />
              </div>
              <div class="p-goods">
                <div class="p-img">
                  <img src="upload/p3.jpg" alt="" />
                </div>
                <div class="p-msg">
                  唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍
                </div>
              </div>
              <div class="p-price">￥29.80</div>
              <div class="p-num">
                <div class="quantity-form">
                  <a href="javascript:;" class="decrement">-</a>
                  <input type="text" class="itxt" value="1" />
                  <a href="javascript:;" class="increment">+</a>
                </div>
              </div>
              <div class="p-sum">￥29.80</div>
              <div class="p-action"><a href="javascript:;">删除</a></div>
            </div>
          </div>

          <!-- 结算模块 -->
          <div class="cart-floatbar">
            <div class="select-all">
              <input type="checkbox" name="" id="" class="checkall" />全选
            </div>
            <div class="operation">
              <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
              <a href="javascript:;" class="clear-all">清理购物车</a>
            </div>
            <div class="toolbar-right">
              <div class="amount-sum">已经选<em>0</em>件商品</div>
              <div class="price-sum">总价： <em>￥0.00</em></div>
              <div class="btn-area">去结算</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- footer start -->
    <div class="footer">
      <div class="w">
        <!-- mod_service -->
        <div class="mod_service">
          <ul>
            <li>
              <i class="mod-service-icon mod_service_zheng"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_kuai"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_bao"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_bao"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <i class="mod-service-icon mod_service_bao"></i>
              <div class="mod_service_tit">
                <h5>正品保障</h5>
                <p>正品保障，提供发票</p>
              </div>
            </li>
          </ul>
        </div>
        <!-- mod_help -->
        <div class="mod_help">
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程 </a></dd>
            <dd><a href="#">会员介绍 </a></dd>
            <dd><a href="#">生活旅行/团购 </a></dd>
            <dd><a href="#">常见问题 </a></dd>
            <dd><a href="#">大家电 </a></dd>
            <dd><a href="#">联系客服 </a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程 </a></dd>
            <dd><a href="#">会员介绍 </a></dd>
            <dd><a href="#">生活旅行/团购 </a></dd>
            <dd><a href="#">常见问题 </a></dd>
            <dd><a href="#">大家电 </a></dd>
            <dd><a href="#">联系客服 </a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程 </a></dd>
            <dd><a href="#">会员介绍 </a></dd>
            <dd><a href="#">生活旅行/团购 </a></dd>
            <dd><a href="#">常见问题 </a></dd>
            <dd><a href="#">大家电 </a></dd>
            <dd><a href="#">联系客服 </a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程 </a></dd>
            <dd><a href="#">会员介绍 </a></dd>
            <dd><a href="#">生活旅行/团购 </a></dd>
            <dd><a href="#">常见问题 </a></dd>
            <dd><a href="#">大家电 </a></dd>
            <dd><a href="#">联系客服 </a></dd>
          </dl>
          <dl class="mod_help_item">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程 </a></dd>
            <dd><a href="#">会员介绍 </a></dd>
            <dd><a href="#">生活旅行/团购 </a></dd>
            <dd><a href="#">常见问题 </a></dd>
            <dd><a href="#">大家电 </a></dd>
            <dd><a href="#">联系客服 </a></dd>
          </dl>
          <dl class="mod_help_item mod_help_app">
            <dt>帮助中心</dt>
            <dd>
              <img src="upload/erweima.png" alt="" />
              <p>品优购客户端</p>
            </dd>
          </dl>
        </div>

        <!-- mod_copyright  -->
        <div class="mod_copyright">
          <p class="mod_copyright_links">
            关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟
            | 品优购社区 | 品优购公益 | English Site | Contact U
          </p>
          <p class="mod_copyright_info">
            地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000
            传真：010-82935100 邮箱: zhanghj+itcast.cn <br />
            京ICP备08001421号京公网安备110108007702
          </p>
        </div>
      </div>
    </div>
    <!-- footer end -->
  </body>
</html>
